<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .a {
            margin-top: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .amount {
            width: 30px;
        }

        .head,
        .commodity,
        .univalence,
        .quantity,
        .subtotal,
        .operation,
        .heads,
        .commoditys,
        .univalences,
        .quantitys,
        .subtotals,
        .operations {
            width: 100px;
            height: 50px;
            border: 1px rgb(112, 97, 97) solid;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }

        .commodity,
        .commoditys {
            width: 500px;
        }

        .univalence,
        .univalences {
            width: 200px;
        }

        .quantity,
        .quantitys {
            width: 150px;
        }

        .subtotal,
        .subtotals {
            width: 250px;
        }

        .operation,
        .operations {
            width: 150px;
        }

        .b {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .heads,
        .commoditys,
        .univalences,
        .quantitys,
        .subtotals,
        .operations {
            height: 200px;
            line-height: 200px;
        }

        img {
            width: 180px;
            height: 160px;
            margin-top: 20px;
        }

        .commoditys {
            display: flex;
            justify-content: center;

        }

        .amount {
            padding: 0 10px;
            border: 1px rgb(117, 105, 105) solid;
        }

        .c {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }

        .digit {
            color: red;
        }

        .footing {
            margin-left: 10px;
        }

        .c1 {
            border: 1px rgb(112, 97, 97) solid;
            padding: 14px 4px 14px 0;
        }

        .c2 {
            width: 150px;
            height: 50px;
            border: 1px rgb(112, 97, 97) solid;
            line-height: 50px;
            text-align: center;
        }

        .delete {
            margin-left: 948px;
        }

        .quantitys {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quantitys span {
            width: 20px;
            height: 26px;
            line-height: 26px;
            background-color: #ff0;
        }

        .quantitys .off {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <div class="a">
        <span class="head">
            <input type="checkbox" class="cheone">全选
        </span>
        <p class="commodity">
            <span>商品</span>
        </p>
        <p class="univalence">
            <span>单价</span>
        </p>
        <p class="quantity">
            <span>数量</span>
        </p>
        <p class="subtotal">
            <span>小计</span>
        </p>
        <p class="operation">
            <span>操作</span>
        </p>
    </div>
    <ul>
        <li class="b">
            <span class="heads">
                <input type="checkbox" class="chetwo">
            </span>
            <p class="commoditys">

                <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                    alt="">
                <span class="">Casio/卡西欧EX-TR350</span>

            <p class="univalences">
                <span>5999.88</span>
            </p>
            <p class="quantitys">
                <span class="off reduce"></span>
                <input type="text" class="amount" value="1">
                <span class="add">+</span>
            </p>
            <p class="subtotals">5999.88</p>
            <p class="operations">
                <span>删除</span>
            </p>
        </li>
        <li class="b">
            <span class="heads">
                <input type="checkbox" class="chetwo">
            </span>
            <p class="commoditys">

                <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                    alt="">
                <span class="">Casio/卡西欧EX-TR350</span>

            <p class="univalences">
                <span>3888.67</span>
            </p>
            <p class="quantitys">
                <span class="off reduce"></span>
                <input type="text" class="amount" value="1">
                <span class="add">+</span>
            </p>
            <p class="subtotals">3888.67</p>
            <p class="operations">
                <span>删除</span>
            </p>
        </li>
        <li class="b">
            <span class="heads">
                <input type="checkbox" class="chetwo">
            </span>
            <p class="commoditys">

                <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                    alt="">
                <span class="">Casio/卡西欧EX-TR350</span>

            <p class="univalences">
                <span>3456.66</span>
            </p>
            <p class="quantitys">
                <span class="off reduce"></span>
                <input type="text" class="amount" value="1">
                <span class="add">+</span>
            </p>
            <p class="subtotals">3456.66</p>
            <p class="operations">
                <span>删除</span>
            </p>
        </li>
    </ul>
    <div class="c">
        <p class="c1">
            <span class="del">删除</span>
            <span class="delete">
                <span>已选商品
                    <span class="digit">2</span>
                    件
                </span>
                <span class="footing">
                    合计：￥
                    <span class="m">1234</span>
                </span>
            </span>
        </p>
        <p class="c2">结算</p>
    </div>


    <h1 style="display: none;">购物车空空</h1>

    <script>


        //  单删和批量删除的时候，都需要重新赋值  oOnes 

        //  数量加的时候，需要判断是否有减号-  

        //  数量减的时候，先判断是否可以减   ---  判断有没有 -   不判断数量

        //  小计  函数


        // 优化：  商品删完以后，要把全选取消或者隐藏整个购物车









        var oAll = document.querySelector('.cheone');
        var oOnes = document.querySelectorAll('.chetwo');
        var oDels = document.querySelectorAll('.operations span');
        var oDelAll = document.querySelector('.del');
        var oAdds = document.querySelectorAll('.add');
        var oReduces = document.querySelectorAll('.reduce');
        var oCount = document.querySelector('.digit');
        var oMoney = document.querySelector('.m');
        var oCounts = document.querySelectorAll('.amount');

        // 全选
        oAll.onclick = function () {
            for (var i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = this.checked;
            }
            total()
        }

        // 反向选择
        for (var i = 0; i < oOnes.length; i++) {
            oOnes[i].onclick = function () {
                for (var i = 0; i < oOnes.length; i++) {
                    if (!oOnes[i].checked) {
                        break;
                    }
                }
                console.log(i);
                oAll.checked = i === oOnes.length;
                total()
            }
        }



        // 单独删除
        for (var i = 0; i < oDels.length; i++) {
            oDels[i].onclick = function () {
                this.parentElement.parentElement.remove();

                // 单选的个数已经发生了改变   重新赋值
                oOnes = document.querySelectorAll('.chetwo');

                // 再一次反向勾选
                for (var i = 0; i < oOnes.length; i++) {
                    if (!oOnes[i].checked) {
                        break;
                    }
                }
                oAll.checked = i === oOnes.length;
                total()

                if (oOnes.length === 0) {
                    oAll.checked = false;
                }

            }
        }



        // 批量删除   --- 删除选中的
        oDelAll.onclick = function () {
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    oOnes[i].parentElement.parentElement.remove();
                }
            }
            oOnes = document.querySelectorAll('.chetwo');
            total();

            console.log(oOnes);
            if (oOnes.length === 0) {
                oAll.checked = false;
                // alert('购物车空空如也,点击去购买') ;
                // location.href = './list.html' ;
            }
        }


        // 加号
        for (var i = 0; i < oAdds.length; i++) {
            oAdds[i].onclick = function () {
                // 数量增加
                this.previousElementSibling.value++;

                // 这里是为了表单的change事件中，如果用户输入错误，还显示原来的数据，在输入框发生改变之前要把输入框的值存起来 --- 把值绑定在输入框上面
                this.previousElementSibling.setAttribute('data', this.previousElementSibling.value);

                // 小计
                this.parentElement.nextElementSibling.innerHTML = this.previousElementSibling.value * this.parentElement.previousElementSibling.children[0].innerHTML;

                // 添加- 
                if (!this.previousElementSibling.previousElementSibling.innerHTML) {
                    this.previousElementSibling.previousElementSibling.innerHTML = '-';
                    this.previousElementSibling.previousElementSibling.classList.remove('off');
                }
                total()
            }
        }


        // 减号
        for (var i = 0; i < oReduces.length; i++) {
            oReduces[i].onclick = function () {
                //    先判断是否可以做减法
                if (this.innerHTML) {    //   if(this.innerHTML==='-') 有内容就转为真    有内容就是有减号
                    // 数量减
                    this.nextElementSibling.value--;


                    // 这里是为了表单的change事件中，如果用户输入错误，还显示原来的数据，在输入框发生改变之前要把输入框的值存起来 --- 把值绑定在输入框上面
                    this.nextElementSibling.setAttribute('data', this.nextElementSibling.value)

                    this.parentElement.nextElementSibling.innerHTML = this.nextElementSibling.value * this.parentElement.previousElementSibling.children[0].innerHTML;
                    if (this.nextElementSibling.value == 1) {
                        this.innerHTML = '';
                        this.classList.add('off');
                    }
                    total()
                }
            }
        }



        // 输入框事件和键盘事件

        //   注意：在输入错误的时候，让输入框的值恢复到原来的状态 
        

        for (var i = 0; i < oCounts.length; i++) {
            // 这里是为了表单的change事件中，如果用户输入错误，还显示原来的数据，在输入框发生改变之前要把输入框的值存起来 --- 把值绑定在输入框上面 
            oCounts[i].setAttribute('data', oCounts[i].value);


            oCounts[i].onchange = function () {
                // 输入的如果不对   显示原来的值
                if (this.value > 0 && this.value % 1 === 0) {
                    // 这里是为了表单的change事件中，如果用户输入错误，还显示原来的数据，在输入框发生改变之前要把输入框的值存起来 --- 把值绑定在输入框上面
                    this.setAttribute('data' , this.value) ;
                    this.parentElement.nextElementSibling.innerHTML = this.value * this.parentElement.previousElementSibling.children[0].innerHTML;
                    total()
                } else {
                    this.value = this.getAttribute('data');
                }
            }


            oCounts[i].onkeydown = function(e) {
                // ctrl加回车
                if(e.keyCode === 13 && e.ctrlKey) {
                    // 输入的如果不对   显示原来的值
                    if (this.value > 0 && this.value % 1 === 0) {
                        // 这里是为了表单的change事件中，如果用户输入错误，还显示原来的数据，在输入框发生改变之前要把输入框的值存起来 --- 把值绑定在输入框上面
                        this.setAttribute('data' , this.value) ;
                        this.parentElement.nextElementSibling.innerHTML = this.value * this.parentElement.previousElementSibling.children[0].innerHTML;
                        total()
                    } else {
                        this.value = this.getAttribute('data');
                    }
                }
            }

        }


        





        // 合计：   看是否选中
        function total() {
            var sum = 0;   // 数量
            var money = 0;   // 总价
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    var num = oOnes[i].parentElement.parentElement.querySelector('.amount').value;
                    var price = oOnes[i].parentElement.parentElement.querySelector('.subtotals').innerHTML;
                    console.log(price);
                    sum += num * 1;
                    money += price * 1;

                }
            }
            oCount.innerHTML = sum;
            oMoney.innerHTML = money;
        }



    </script>



</body>

</html>